<template>
  <div class="footer">
    <div class="item">
      <router-link to="/" class="item-nav" active-class="active">
        <van-icon name="wap-home-o"/>
        首页
      </router-link>
    </div>
    <div class="item">
      <router-link to="/cart" class="item-nav" active-class="active">
        <van-icon name="cart-o"/>
        购物车
      </router-link>
    </div>
    <div class="item">
      <router-link to="/order" class="item-nav" active-class="active">
        <van-icon name="coupon-o"/>
        订单
      </router-link>
    </div>
    <div class="item">
      <router-link to="/mine" class="item-nav" active-class="active">
        <van-icon name="manager-o"/>
        我的
      </router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #fff;
  border-top:.15px solid rgba(204, 204, 204, 0.283);
  .item {
    flex: 1;
    .item-nav {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      font-size: 18px;
    }
    .active{
      color: orange;
    }
    .van-icon{
      font-size: 30px !important;
    }
  }
}
</style>